<template>
  <div class="home">
    兴趣爱好：
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span>{{ item }}</span>
        <input type="checkbox" v-model="result" :value="item" />
      </li>
      <!-- 复选框组v-model的是一个数组 每一个复选框都应该有一个value值 在选中的时候会把这个value值push进这个数组中 -->
    </ul>

    是否同意协议：<input type="checkbox" v-model="checked" @change="check" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["吃饭", "睡觉", "打王者", "敲代码", "唱跳rap", "篮球"],
      result: [],
      checked: false,
    };
  },
  methods: {
    check() {
      if (this.checked == true) {
        console.log("同意协议");
      } else {
        console.log("不同意协议");
      }
    },
  },
};
</script>
